<template>
	<view class="all">

		<u-navbar title="兑换中心" :background="{
			 backgroundColor: 'rgb(254,210,8)',
		 }" title-bold>
			<view slot="right" @click="submit('兑换记录')" style="margin-right: 20rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			opacity: 1;
			">兑换记录</view>
		</u-navbar>
		<view class="carp">
			<view class="carp_1">
				<view class="carp_1_1">
					<view class="dh">兑换码</view>
					<view class="carp_1_2">
						<u-input input-align='center' type="text" value="" />
					</view>
				</view>
			</view>
		</view>
		<view class="bc" @click="submit('兑换')">
			兑换
		</view>
		<u-popup :border-radius='20' :mask-close-able='false' v-model="show" mode="center" length="90%">
			<view class="pop">
				<view class="popup_1">
					兑换成功
				</view>
				<image class="image"
					src="https://img1.baidu.com/it/u=1695620879,2798080271&fm=253&fmt=auto&app=138&f=JPEG?w=705&h=470">
					<text>精品课程</text>
					<text>给管理者的沟通训练营</text>
					<text @click="show=false">领取</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			};
		},
		methods: {
			submit(a) {
				if (a == '兑换') {
					this.show = true
				} else if (a == '兑换记录') {
					uni.navigateTo({
						url: './dhjl'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.pop {
		padding: 30rpx;
		text-align: center;

		text:nth-of-type(1) {
			margin: 50rpx auto 0;
			width: 120rpx;
			height: 42rpx;
			border: 1rpx solid #E61E2A;
			opacity: 1;
			border-radius: 4px;
			line-height: 42rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #E61E2A;
			opacity: 1;
		}

		text:nth-of-type(2) {
			margin-top: 10rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			opacity: 1;
		}

		text:nth-of-type(3) {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #703F00;
			opacity: 1;
			width: 300rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 100rpx auto 100rpx;
			background: #FFD500;
			opacity: 1;
			border-radius: 44rpx;
		}

		text {
			display: block;
		}

		.image {
			width: 240rpx;
			border-radius: 8rpx;
			margin-top: 100rpx;
			height: 150rpx;
		}

		.popup_1 {
			font-size: 42rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #141414;
			opacity: 1;
			text-align: center;
			border-bottom: 1rpx solid #EFEFEF;
			padding: 40rpx 0 40rpx 0;
		}
	}

	.bc {
		width: 300rpx;
		height: 88rpx;
		background: #FFD500;
		opacity: 1;
		border-radius: 44px;
		text-align: center;
		margin: 200rpx auto;
		line-height: 88rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #703F00;
		opacity: 1;
	}

	.all {
		.carp {
			height: 300rpx;
			background-color: rgb(253, 209, 6);
			position: relative;

			.carp_1 {
				position: absolute;
				justify-content: center;
				display: flex;
				align-items: center;
				top: 100rpx;
				left: 50%;
				margin-left: -345rpx;
				background-color: white;
				border-radius: 8rpx;
				width: 690rpx;
				height: 300rpx;

				.carp_1_2 {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					width: 580rpx;
					height: 88rpx;
					background: #F6F6F6;
					opacity: 1;
					border-radius: 44rpx;
					text-align: center;
				}

				.carp_1_1 {
					.dh {
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						opacity: 1;
					}
				}
			}
		}

		min-height: 1400rpx;
		background-color:#F5F5F5;
	}
</style>
